<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('团队人员') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('年份')" prop="year">
        <DatePicker v-model="queryParams.year" type="year" value-format="yyyy" :placeholder="$t('年份')" :clearable="false" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <!--        <el-button type="warning" icon="el-icon-download" size="mini" @click="exportHandle">{{ $t("导出") }}</el-button>-->
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      tooltip-effect="darkTable"
      row-key="deptId"
      :tree-props="{children: 'children',hasChildren: 'hasChildren'}"
      :data="dataList"
      border
      :cell-style="cellStyle"
      @cell-click="cellClick"
    >
      <el-table-column :label="$t('团队')" align="center" :prop="propLabelName" fixed width="150" show-overflow-tooltip />
      <el-table-column :label="$t('2月人数')" align="center" prop="februaryTeamCount" width="100">
        <template slot-scope="scope">
          <el-link v-if="scope.row.type !== 'profit'" :underline="false" class="money-text" type="primary">{{ scope.row.februaryTeamCount }}</el-link>
          <span v-else class="money-text">{{ scope.row.februaryTeamCount }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('3月人数')" align="center" prop="marchTeamCount" width="100">
        <template slot-scope="scope">
          <el-link v-if="scope.row.type !== 'profit'" :underline="false" class="money-text" type="primary">{{ scope.row.marchTeamCount }}</el-link>
          <span v-else class="money-text">{{ scope.row.marchTeamCount }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('4月人数')" align="center" prop="aprilTeamCount" width="100">
        <template slot-scope="scope">
          <el-link v-if="scope.row.type !== 'profit'" :underline="false" class="money-text" type="primary">{{ scope.row.aprilTeamCount }}</el-link>
          <span v-else class="money-text">{{ scope.row.aprilTeamCount }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('5月人数')" align="center" prop="mayTeamCount" width="100">
        <template slot-scope="scope">
          <el-link v-if="scope.row.type !== 'profit'" :underline="false" class="money-text" type="primary">{{ scope.row.mayTeamCount }}</el-link>
          <span v-else class="money-text">{{ scope.row.mayTeamCount }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('6月人数')" align="center" prop="juneTeamCount" width="100">
        <template slot-scope="scope">
          <el-link v-if="scope.row.type !== 'profit'" :underline="false" class="money-text" type="primary">{{ scope.row.juneTeamCount }}</el-link>
          <span v-else class="money-text">{{ scope.row.juneTeamCount }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('7月人数')" align="center" prop="julyTeamCount" width="100">
        <template slot-scope="scope">
          <el-link v-if="scope.row.type !== 'profit'" :underline="false" class="money-text" type="primary">{{ scope.row.julyTeamCount }}</el-link>
          <span v-else class="money-text">{{ scope.row.julyTeamCount }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('8月人数')" align="center" prop="augustTeamCount" width="100">
        <template slot-scope="scope">
          <el-link v-if="scope.row.type !== 'profit'" :underline="false" class="money-text" type="primary">{{ scope.row.augustTeamCount }}</el-link>
          <span v-else class="money-text">{{ scope.row.augustTeamCount }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('9月人数')" align="center" prop="septemberTeamCount" width="100">
        <template slot-scope="scope">
          <el-link v-if="scope.row.type !== 'profit'" :underline="false" class="money-text" type="primary">{{ scope.row.septemberTeamCount }}</el-link>
          <span v-else class="money-text">{{ scope.row.septemberTeamCount }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('10月人数')" align="center" prop="octoberTeamCount" width="100">
        <template slot-scope="scope">
          <el-link v-if="scope.row.type !== 'profit'" :underline="false" class="money-text" type="primary">{{ scope.row.octoberTeamCount }}</el-link>
          <span v-else class="money-text">{{ scope.row.octoberTeamCount }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('11月人数')" align="center" prop="novemberTeamCount" width="100">
        <template slot-scope="scope">
          <el-link v-if="scope.row.type !== 'profit'" :underline="false" class="money-text" type="primary">{{ scope.row.novemberTeamCount }}</el-link>
          <span v-else class="money-text">{{ scope.row.novemberTeamCount }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('12月人数')" align="center" prop="decemberTeamCount" width="100">
        <template slot-scope="scope">
          <el-link v-if="scope.row.type !== 'profit'" :underline="false" class="money-text" type="primary">{{ scope.row.decemberTeamCount }}</el-link>
          <span v-else class="money-text">{{ scope.row.decemberTeamCount }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('1月人数')" align="center" prop="januaryTeamCount" width="100">
        <template slot-scope="scope">
          <el-link v-if="scope.row.type !== 'profit'" :underline="false" class="money-text" type="primary">{{ scope.row.januaryTeamCount }}</el-link>
          <span v-else class="money-text">{{ scope.row.januaryTeamCount }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('团队总人数')" align="center" prop="totalTeamCount" width="100">
        <template slot-scope="scope">
          <a class="money-text" style="color: #1890ff" @click.stop="openTeamUser(scope.row,scope.column)">{{ moneyFormat(scope.row.totalTeamCount) }}</a>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="teamName" :visible.sync="openUser" :close-on-click-modal="false" top="6vh" width="50%" :lock-scroll="true" append-to-body @close="closeDialog">
      <el-table v-loading="userLoading" max-height="600" tooltip-effect="darkTable" :data="userList" border :cell-style="cellStyle">
        <el-table-column :label="$t('姓名')" align="center" prop="name" min-width="150" show-overflow-tooltip />
        <el-table-column :label="$t('所在部门')" align="center" prop="deptName" min-width="100" />
        <el-table-column :label="$t('职位')" align="center" prop="positionName" min-width="100" />
        <el-table-column :label="$t('入职时间')" align="center" prop="entryTime" min-width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.entryTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  findUserList, getTeamUser,
  refreshReport
} from '@/api/anxin/summary/collectionSummary'
import { findByRole } from '@/api/deal/team/dealTeam'

export default {
  data() {
    return {
      title: '',
      open: false,
      dataList: [],
      loading: false,
      queryParams: {
        year: undefined,
        type: 'month',
        teamUserIds: undefined,
        num: 3
      },
      param: undefined,
      type: undefined,
      viewType: this.$route.query.viewType,
      teamUserList: [],
      propLabelId: this.$route.query.viewType === 'teamUser' ? 'teamUserId' : 'deptId',
      propLabelName: this.$route.query.viewType === 'teamUser' ? 'teamUserName' : (this.yearType === 'year' ? '1deptName' : 'deptName'),
      userList: [],
      userLoading: true,
      openUser: false,
      teamName: '',
      yearType: 'month'
    }
  },
  created() {
    this.queryParams.year = (this.parseTime(new Date(), '{m}') === '01' ? (parseInt(this.parseTime(new Date(), '{y}')) - 1) : this.parseTime(new Date(), '{y}')).toString()
    this.getList()
  },
  mounted() {
    if (this.viewType === 'teamUser') {
      findByRole('X').then(res => {
        this.teamUserList = res.data
      })
    }
  },
  methods: {
    getRowKey(row) {
      return row.datakey
    },
    getList() {
      this.loading = true
      getTeamUser(this.queryParams).then(res => {
        this.dataList = res.data
        this.loading = false
      })
      // if (this.viewType === 'teamUser') {
      //   findCollectionByTeamUserIds(this.queryParams).then(response => {
      //     this.dataList = response.data
      //     this.loading = false
      //   })
      // } else {
      //   findCollection(this.queryParams).then(response => {
      //     this.dataList = response.data
      //     this.yearType = type
      //     setTimeout(() => {
      //       this.loading = false
      //     }, 200)
      //   })
      // }
    },
    queryHandle() {
      this.getList(this.yearType)
    },
    refreshHandle() {
      this.loading = true
      // eslint-disable-next-line no-unused-vars
      refreshReport().then(res => {
        this.$message.info('计算中,请稍后进行查看......')
        this.getList(this.yearType)
      })
    },
    onChange() {
      this.getList(this.queryParams.type)
    },
    cellStyle({ row }) {
      var propLabelName = this.yearType === 'year' ? (this.viewType === 'teamUser' ? 'teamUserName' : '1deptName') : (this.viewType === 'teamUser' ? 'teamUserName' : 'deptName')
      if (row[propLabelName].indexOf('合计') >= 0) {
        return 'color:#303133;background-color:#E6A23C'
      }
    },
    openTeamUser(row, column) {
      var month = column.property.substring(0, column.property.length - 9)
      this.userLoading = true
      this.teamName = row.deptName
      findUserList({ year: month === 'january' ? Number(this.queryParams.year) + 1 : this.queryParams.year, month: month, type: 'profit' }, row.deptId).then(res => {
          this.userList = res.data
          this.userLoading = false
          this.openUser = true
      })
    },
    cellClick(row, column) {
      this.param = this.resolvingProperty(column.property)
      console.log(this.param, '参数')

      if (this.param.category === 'unt') {
        this.openTeamUser(row, column)
        return
      }
    },
    // 解析table-column-prop
    resolvingProperty(val) {
      // 截取月份
      var month = val.substring(0, val.length - 9)
      // 截取后三位 Est/Act
      var category = val.substring(val.length - 3, val.len).toLowerCase()
      return { month, category }
    },
    closeDialog() {
      // this.getList(this.queryParams.type)
    },
    /** 导出按钮操作 */
    exportHandle() {
      this.queryParams.exportType = 'list'
      this.downLoadExcel('/collection/dealCollection/exportCollectionSummary', this.queryParams)
    },

    /**
     * 列变色
     */
    cellClassName({ columnIndex, column }) {
      if (this.yearType === 'month') {
        if ((columnIndex !== 0 && columnIndex % 6 === 0 || columnIndex !== 0 && columnIndex % 6 === 4 || columnIndex !== 0 && columnIndex % 6 === 5 || columnIndex !== 0 && columnIndex % 6 === 6) && !(column.label.indexOf('人均E') > -1 || column.label.indexOf('人均A') > -1)) {
          return 'gray'
        }
        if (column.label.indexOf('合计') > -1 || column.label.indexOf('团队人数') > -1 || column.label.indexOf('人均E') > -1 || column.label.indexOf('人均A') > -1) {
          return 'yellow'
        }
      }
      if (this.yearType === 'year') {
        var year = new Date().getFullYear()
        if ((columnIndex !== 0 && columnIndex % 4 === 0 || columnIndex !== 0 && columnIndex % 4 === 3) && column.label.indexOf(year + '') === -1) {
          return 'gray'
        }
        if (this.queryParams.num % 2 === 0 && column.label.indexOf(year + '') !== -1) {
          return 'gray'
        }
      }
      return ''
    }
  }
}
</script>

<style scoped>
.select /deep/ .el-input {
  width: auto !important;
}
a:hover{
  text-decoration: underline;
}
/deep/.gray {
  background-color: #eee;
}
/deep/ .yellow{
  color:#303133;
  background-color:#e8e8e8
}
</style>
